<template>
<div class="content">
  <div class="total-info">
    <div class="total">已选({{selectedList.length}}/{{max}})</div>
    <div class="selected-info">
      <div class="selected-item" v-for="(item,index)  in selectedList" :key="item.id">
        <div>{{item.data}}<i class="el-icon-close" @click="deleteItem(index)"></i></div>
      </div>
    </div>
  </div>
  <div class="total-info">
    <div class="title">职位福利</div>
    <div class="selected-info" v-loading="welfareLoading">
      <div class="selected-item" v-for="(item,index)  in welfareList" :key="item.id"  @click="changeMenuSelected(item)" :class="selectedList.includes(item)?'active':''">
       <div> {{item.data}}</div>
      </div>
    </div>
  </div>
  <div class="custom">
    <div class="title">自定义标签</div>
    <div class="tip" @click="state=2" v-if="state===1"><i class="el-icon-plus" style="color: #ff7626;padding: 8px 12px;cursor: pointer;">添加福利</i></div>
    <div class="welfare" v-else>
      <el-input v-model="form.data" placeholder="填写职位福利，最多8个字" class="welfare-btn" maxlength="8"></el-input>
      <div class="add" @click="addMenuSelected(form)">添加</div>
    </div>
  </div>
</div>
</template>

<script>
import {getJobWelfareListApi, getWelfareListApi} from "@/api/position";
import {validate} from "@/utils/validate";
export default {
  name: "JobWelfare",
  emits:['dialogVisible'],
  props:["pid"],
  data(){
    return{
      welfareList:[],
      welfareLoading:false,
      form:{
        data:''
      },
      rules:{
        data:{
          name:'职位福利',
          required:true,
        },},
      selectedList:[],
      max:10,
      state:1,
      welfareIndex:null
    }
  },
  methods:{
    getWelfareList(){
      this.welfareLoading=true
      getWelfareListApi().then((res)=>{
        this.welfareList=res ?? [];
      }).finally(()=>{
        this.welfareLoading=false
      })
    },
    getWelfare(){
      if(this.pid!==0){
        getJobWelfareListApi({id:this.pid}).then((res)=>{
          this.selectedList=res ?? [];
        })
      }
    },
    changeMenuSelected(item) {
      let j = 0;
      for(j;j<this.selectedList.length-1; j++){
        if(this.selectedList[j].id === item.id) {
          this.$message.error('请不要重复选择！');
          this.welfareIndex=1
        }
      }
     if(this.welfareIndex!==1){
       this.utils.multipleChoiceChange(this.selectedList, item,this.max)
     }
    },
    addMenuSelected(item) {
      if (validate(this.form, this.rules)) {
        this.utils.multipleChoiceChange(this.selectedList, item,this.max)
      }
    },
    deleteItem(index){
      this.selectedList.splice(index, 1);
    },
    handleClose() {
      this.$emit("child",);
      },
    submit() {
      let copy = JSON.parse(JSON.stringify(this.selectedList));
      let data = []
      copy.forEach((item)=>{
        data.push(item.data)
      })
      const jobWelfare = data.join(",");
      if (data.length === 0) {
        this.$message.error('请至少选择一个！');
      }
      else {
        this.$emit("child",jobWelfare);
      }
    },
  },
  mounted() {
    this.getWelfareList()
    this.getWelfare()
  }
}
</script>

<style scoped lang="scss">
.content{
  padding: 30px;
  max-height: 540px;
  overflow-y: scroll;
  .total-info{
    display: flex;
    flex-direction: column;
    .total{
      font-size: 17px;
      margin-bottom: 10px;
    }
    .title{
      font-size: 17px;
      margin-bottom: 10px;
    }
    .selected-info{
      display: flex;
      flex-wrap: wrap;
      .selected-item{
        margin-right: 15px;
        background: #F5F5F5f5;
        padding: 6px 15px;
        margin-bottom: 10px;
        border-radius: 8px;
        cursor: pointer;
        border: 1px solid rgba(0, 0, 0, 0);
      }
      .selected-item.active{
        border: 1px solid $orange;
        color: $orange;
        background: none;
      }
    }
  }
  .custom{
    margin-top: 10px;
    .title{}
    .tip{
      border: 1px dashed #ff7626;
      border-radius: 8px;
      margin-left: 5px;
      width: 100px;
      margin-top: 15px;
    }
    .welfare{
      display: flex;
      flex-direction: row;
      align-items: center;
      .welfare-btn{
        width: 200px;
        margin-right: 20px;
        margin-top: 15px;
      }
      .add{
        color: #ff7626;
        margin-top: 15px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
}
</style>